import React, { Component } from "react";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { AtRadio } from "taro-ui";

import "./index.less";

class Topic extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      value: ""
    };
  }
  handleChange(value) {
    switch (this.props.key1) {
      case 0:
        Taro.setStorage({
          key: "value1",
          data: JSON.stringify(value || {})
        });
        break;
      case 1:
        Taro.setStorage({
          key: "value2",
          data: JSON.stringify(value || {})
        });
        break;
      case 2:
        Taro.setStorage({
          key: "value3",
          data: JSON.stringify(value || {})
        });
        break;
      case 3:
        Taro.setStorage({
          key: "value4",
          data: JSON.stringify(value || {})
        });
        break;
      case 4:
        Taro.setStorage({
          key: "value5",
          data: JSON.stringify(value || {})
        });
        break;
      default:
        break;
    }

    this.setState({
      value
    });
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {
    this.handleChange();
  }

  // 对应 onLaunch
  onLaunch() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}
  // 返回
  goBack = () => {
    Taro.navigateBack();
  };
  render() {
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    return (
      <View className="topic">
        <View className="tip">
          <View className="top">单项选择</View>
          <View className="middle">
            1.考试开始后不得退出，如退出将视为提前交卷，无法重新进入考试。
            <Text>{this.state.value}</Text>
          </View>
        </View>
        <AtRadio
          options={[
            { label: "A.AAAA", value: "A" },
            { label: "B.BBBB", value: "B" },
            { label: "C.CCCC", value: "C" },
            { label: "D.DDDD", value: "D" }
          ]}
          value={this.state.value}
          onClick={this.handleChange.bind(this)}
          className="bottom"
        />
      </View>
    );
  }
}

export default Topic;
